import React from 'react';
import '../../style/index/Leavemanage.scss'
import  axios  from 'axios'
import { Outlet, useNavigate } from 'react-router-dom';

import {name_search, id_search,approved_list ,page_search,reason_search,delete_info,leaver_list} from '../../utils/apileave'
import Authbutton from '../../utils/Authbutton'

import { AudioOutlined ,EditOutlined,DeleteOutlined,CheckOutlined ,FileSearchOutlined } from '@ant-design/icons';
import { Input, Space,Table, Tag, Skeleton,notification,Button,Modal,Drawer } from 'antd';

import { useEffect, useState } from 'react';
import Edit from './Leavemanage/Edit'
import Leaveapplication from './Leavemanage/Leaveapplication';
const { Search } = Input;
function Leavemanage(props) {
    // 定义数据来接收请求回来的数据
    var [leave_list,setLeave_list] = useState([])
    useEffect(()=>{
        // axios.get('/leaver').then((res)=>{
        //     setLeave_list(res.data)
        //     console.log("请假管理",res)
        // })
        
        leaver_list().then((res)=>{
            setLeave_list(res.data)
        })
    },[])

    // input组件
    const onSearch = (value) =>{
       console.log(value); 
    //    axios.get('/leaver?name_like='+value).then((res)=>{
    //     console.log(res.data);
    //     setLeave_list(res.data)
    //   })
        name_search(value).then((res)=>{
            setLeave_list(res.data);
            if(res.data.length>0){
                notification.success({message:'查询成功!'});
            }else{
                notification.error({message:'未找到查询对象!'});
            }
        })
    } 
    const onSearch2 = (value) =>{
       console.log(value); 
    //    axios.get('/leaver?id_like='+value).then((res)=>{
    //     console.log(res.data);
    //     setLeave_list(res.data)
    //   })
      id_search(value).then((res)=>{
        setLeave_list(res.data);
        if(res.data.length>0){
            notification.success({message:'查询成功!'});
        }else{
            notification.error({message:'未找到查询对象!'});
        }
        })
    } 
    const onSearch3 = (value) =>{
       console.log(value); 
    //    axios.get('/leaver?reason_like='+value).then((res)=>{
    //     console.log(res.data);
    //     setLeave_list(res.data)
    //   })
        reason_search(value).then((res)=>{
            setLeave_list(res.data);
            if(res.data.length>0){
                notification.success({message:'查询成功!'});
            }else{
                notification.error({message:'未找到查询对象!'});
            }
        })
    } 

    // 表格
    
    const data = leave_list;
    //决定了每一列渲染什么数据
    const columns = [
        {
            title: '学号',
            dataIndex: 'id',
        },
        {
            title: '姓名',
            dataIndex: 'name'
        },
        {
            title:"请假类型",
            dataIndex:'reason'
        },
        {
            title:'起始时间',
            dataIndex:"start"
        },
        {
          title: '结束时间', //表格列的名字(显示在表格头上)
          dataIndex: 'end', //数据对应的属性名
          //key: 'name' //key是必须的,每一列不同.
        },
        {
          title: '审核状态',
          dataIndex: 'state',
          render:(_,{state})=>(
            <>
                {
                    state == true? <Button type="primary">已通过</Button>
                    : <Button type="primary" danger>待审批</Button>
                  
                }
            </>
          )
        },
             
        {
          title: '提交时间',
          dataIndex: 'submissionTime',
        },        
        {
          title: '操作',
          key: 'action',
          render: (_, record) => (
            <>
                {
                    <i className='iconfont icon-delete' onClick={()=>{setup(record)}}><FileSearchOutlined /></i>
                }
                {
                    Authbutton(333) ?"":
                    <i className='iconfont icon-delete' onClick={()=>{okgo(record)}}><CheckOutlined /></i>
                }
                {
                    Authbutton(333) ?"":
                    <i className='iconfont icon-delete' onClick={()=>{deletes(record)}}><DeleteOutlined /></i>
                }
            </>
          ),
        },
    ];
    // 定义这个item来接收你所点击的数据
    var [item,setItem] = useState({})
    var  Navigate = useNavigate()
    var setup =(record)=>{
        console.log("编辑")
        console.log(record)
        setItem(record)
        setIsModalOpen(true);
    }
    var okgo =(record)=>{
        console.log("通过")
        var {id} = record
        var state = !record.state;
        if(record.state ==true){
            notification.success({message:'审核修改成功!'});
        }else{
            notification.success({message:'审核通过成功!'});
        }
        approved_list({id:id,state:state}).then((res)=>{
            leaver_list().then((res)=>{
                setLeave_list(res.data)
            })
        })
    }
    var deletes =(record)=>{
        console.log("删除")
        console.log(record.id)
        var id = record.id
        // axios.delete('/leaver/'+id).then((res)=>{
        //     console.log(res)
        //     notification.success({message:'删除成功!'});
        //     axios.get('/leaver').then((res)=>{
        //         setLeave_list(res.data)
        //         console.log("再次请求的数据",res)
        //     })
        // })
        delete_info(id).then((res)=>{
            notification.success({message:'删除成功!'});
            leaver_list().then((res)=>{
                setLeave_list(res.data)
            })
        })
    }
    //分页器
    var [pagination,setPagination] = useState({current:1,pageSize:10,total:50})
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    var [customlist,setCustomlist] = useState([])
    var [loading,setLoading] = useState(false);


     //分页
     const handleChange = (pagination)=>{
        setPagination( pagination )//更新页码  //pagination 参数 包含有当前最新页码
        
        setLoading(true)
        //在这里发请求, 获取最新页码对应的数据
        // axios.get(`/leaver?_page:=${pagination.current}&limit:5`).then((res)=>{
        //     console.log(res);
        //     setCustomlist(res.data)
        //     setLeave_list(res.data)
        //     setLoading(false)

        // })
        page_search(pagination).then((res)=>{
            console.log(res);
            setCustomlist(res.data)
            setLeave_list(res.data)
            setLoading(false)
        })
        
    }
    
    var [keylist,setKeylist] = useState([])
    //选择发生改变的回调 选中时
    const onSelectChange = (newSelectedRowKeys) => {
        setSelectedRowKeys(newSelectedRowKeys);
        console.log("悬着了",newSelectedRowKeys)
        setKeylist(newSelectedRowKeys)
    };
    
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    // 对话框
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 点击对话框OK时触发
    const handleOk = () => {
      setIsModalOpen(false);

    };
  
    const handleCancel = () => {
      setIsModalOpen(false);
    };
    // 抽屉
    const [open, setOpen] = useState(false);
    const showDrawer = () => {
        setOpen(true);
      };
    
    const onClose = () => {
    setOpen(false);
    };
    var go =()=>{
        setOpen(true);
    }


    return (
        <div className='leavemanage'>
            <div className='title'>请假管理</div>
            <div className='seach'>
            <Search placeholder="请输入学生姓名" onSearch={onSearch} enterButton />
            <Search placeholder="请输入学生学号" onSearch={onSearch2} enterButton />
            <Search placeholder="请输入请假类型" onSearch={onSearch3} enterButton />
            {
                Authbutton(333) ? <Button type="primary" onClick={go}>请假申请</Button> : <Button disabled>请假申请</Button>
            }

            
            </div>
            <div className='list'>
            {
                    leave_list.length == 0 ? <Skeleton active /> :
                    <Table
                        // rowSelection={rowSelection} 
                        columns={columns}
                        loading={loading}
                        dataSource={data}
                        pagination={pagination} 
                        size='middle'
                        onChange={handleChange} 
                    />
                }
                {/* 对话框 */}
                <Modal title="请假信息详情" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <Edit item={item}/>
                </Modal>
                {/* 抽屉 */}
                <Drawer title="请假申请" placement="right" onClose={onClose} open={open}>
                    <Leaveapplication />
                </Drawer>
            </div>

            
        </div>
    );
}

export default Leavemanage;